<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>345注册</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, maximum-scale=1.0, user-scalable=no" />

		<link rel="stylesheet" href="css/simple-line-icons.css">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui-ext.css">
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.8.3.min.js"></script>
		<style>
			body,
			.mui-content {
				background-color: #fff;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 30%;
			}
			
			.mui-input-row {
				height: 40px;
				margin-top: 20px;
				padding-bottom: 10px;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 70%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
				text-align: center;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			.mui-content {
				height: 100%;
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			.login-logo {
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			.login-title {
				padding-top: 10px;
				padding-bottom: 10px;
				color: #00a8c6;
			}
			
			#login-form {
				padding-top: 0px;
				padding-bottom: 20px;
				padding-left: 30px;
				padding-right: 30px;
			}
			
			#btn_login {
				width: 70%;
				line-height: 2;
			}
			
			.mui-input-group:before,
			.mui-input-group:after {
				height: 0px;
			}
			
			.mui-input-group .mui-input-row {
				height: 45px;
			}
			
			.link-area a {
				color: #bfbfbf;
			}
			
			.input-icon {
				margin-left: 10px;
			}
			
			/**
			 * 提示框
			 */
			.mui-popup {
			    width: 440px;
			    height: 242px;
			}
			
			.mui-popup-inner {
			    padding: 30px;
			    height: 50%;
			    border-radius: 13px 13px 0 0;
			}
			
			.mui-popup-title {
			    font-size: 38px;
			    font-weight: 500;
			    height: 50px;
			    text-align: center;
			}
			
			.mui-popup-title+.mui-popup-text {
			    font-family: inherit;
			    font-size: 28px;
			    height: 40px;
			    margin: -4px 0 0;
			}
			
			.mui-popup-buttons {
			    position: relative;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    height: 50%;
			    -webkit-box-pack: center;
			    -webkit-justify-content: center;
			    justify-content: center;
			}
			
			.mui-popup-button {
			    font-size: 34px;
			    line-height: 44px;
			    position: relative;
			    display: block;
			    overflow: hidden;
			    box-sizing: border-box;
			    width: 100%;
			    height: 70px;
			    padding: 10px 5px;
			    cursor: pointer;
			    text-align: center;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    color: #007aff;
			    background: rgba(255, 255, 255, .95);
			    -webkit-box-flex: 1;
			}
			
		</style>
		<script src="js/md5.js"></script>
		<script src="js/utils/http.utils.js"></script>
		<script type="text/javascript">
			var $InterValObj; //timer变量，控制时间
			var $count = 60; //间隔函数，1秒执行
			var $curCount; //当前剩余秒数
			var $rePhone = /^1[3|4|5|8][0-9]\d{4,8}$/;

			//timer处理函数
			function SetRemainTime() {
				if($curCount == 0) {
					window.clearInterval($InterValObj); //停止计时器
					$("#iptCode").removeAttr("disabled"); //启用按钮
					$("#iptCode").val("重新获取");
				} else {
					$curCount--;
					$("#iptCode").val("重新获取 " + $curCount);
				}
			}

			function fun_ObtainCode() {
				var $telnumber = document.getElementById("iptTelNum").value;
				if($telnumber == "" || $telnumber == null) {
					mui.alert("请输入电话号码!");
					return;
				}

				if(!$rePhone.test($telnumber)) {
					mui.alert("手机号格式不正确，请重新输入！");
					return;
				}

				$curCount = $count;　　 //设置button效果，开始计时
				document.getElementById("iptCode").disabled = true;
				document.getElementById("iptCode").value = "重新获取 " + $curCount
				$InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
				mui.ajax({
					url: $request_url.regCcodes,
					type: "post",
					headers: {
						"Authorization": $headers_authorization
					},
					data: {
						"mobile": $telnumber
					},
					dataType: "json",
					success: function(dat) {
						if(dat.code == 0) {
							localStorage.setItem("regCcode", dat.result.checkcode);
						} else {
							mui.toast(dat.message);
						}
					},
					error: function(e) {

					}
				});
			}

			function userReg() {
				var $telnumber = document.getElementById("iptTelNum").value;
				if($telnumber == "" || $telnumber == null) {
					mui.alert("请输入电话号码!");
					return;
				}

				if(!$rePhone.test($telnumber)) {
					mui.alert("手机号格式不正确，请重新输入！");
					return;
				}

				var $phone_codes = document.getElementById("ipt-input-code").value;
				if($phone_codes == "" || $phone_codes == null) {
					mui.alert("请输入手机验证码!");
					return;
				}

				if($phone_codes != localStorage.getItem("regCcode")) {
					mui.alert("输入的验证码有误!");
					return;
				}

				var $password = document.getElementById("ipt-password").value;
				if($password == "" || $password == null) {
					mui.alert("请输入密码!");
					return;
				}

				mui.ajax({
					url: $request_url.userReg,
					type: "post",
					data: {
						mobile: $telnumber,
						checkcode: $phone_codes,
						password: hex_md5($password),
						orgid: ""
					},
					headers: {
						"Authorization": $headers_authorization
					},
					dataType: "json",
					success: function(dat) {
						var $codes = dat.code;
						if($codes == 0) {
							mui.openWindow({
								url : "login.html"
							});
						} else {
							mui.toast(dat.message);
						}
					},
					error: function(e) {
						mui.toast("请求失败!");
					}

				});
			}
		</script>

	</head>

	<body style="margin-bottom: 150px; margin-top: 150px; width: 100%; height: 100%;">
		<div class="mui-content" align="center" style="width: 100%; height: 100%;">
			<div class="login-logo">
				<img src="img/login/logo_03.png" width="180" height="180" />
				<h2 class="login-title">家长无难事</h2>
			</div>
			<form id='login-form'>
				<div>
					<div class="mui-input-row" style="background: url(img/reg/kuang_03.png) no-repeat; width: 490px; height: 80px;">
						<label style="margin-left: -40px;"><img src="img/login/dianhua_03.png" width="32" height="42"/></label>
						<input id='iptTelNum' type="text" style="font-size: 26px; height: 62px; margin-top: 8px; margin-bottom: 8px;" placeholder="请输入手机号码">
					</div>
					<div style="width: 130px; height: 70px; float: right; margin-right: -28px; margin-top: -78px;">
						<input id="iptCode" onclick="fun_ObtainCode();" type="button" style="background: url(img/reg/huoquyanzhengma02_03.png) no-repeat; border: 0px; height: 70px; width: 130px; font-size: 17px;" value="获取验证码" />
					</div>

					<div class="mui-input-row" style="background: url(img/reg/kuang_03.png) no-repeat; width: 490px; height: 70px;">
						<label style="margin-top: 8px; margin-bottom: 8px; margin-left: -40px;"><img src="img/reg/yanzhengma_03.png" width="32" height="42"/></label>
						<input id="ipt-input-code" type="number" style="font-size: 26px; height: 70px;" placeholder="请输入验证码">
					</div>
					<div class="mui-input-row" style="background: url(img/reg/kuang_03.png) no-repeat; width: 490px; height: 70px;">
						<label style="margin-top: 8px; margin-bottom: 8px; margin-left: -40px;"><img src="img/login/mima_07.png" width="32" height="42" /></label>
						<input id='ipt-password' style="font-size: 26px; height: 70px;" type="password" placeholder="请设置账号密码">
					</div>
				</div>
			</form>
			<br /><br />
			<div class="mui-content-padded">
				<button id='btn_login' onclick="userReg();" type="button" style="background: url(img/reg/zhucekuang_03.png); width: 490px; height: 70px; border: 0px;"></button>
			</div>
			<br /><br />
			<div class="" style="font-size: 22px; color: #909090;">
				<a href="login.html" id='go-login' style="color: #909090;">已注册，直接登录</a><br />
				<hr width="180" />
			</div>
		</div>
		</footer>
	</body>

</html>